<!--
***收入明细***
-->
<template>
  <div class="main">
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>{{title[type-1]}}</h3>
      </div>
    </v-header>
    <div class="title">
      <div class="filter">
        <p class="filter-time" :class="{nofilter: !css.filter}" @click="switchDateChoose"><span>{{dateMonth}}</span> / {{dateYear}}</p>
        <p class="filter-status" @click="switchFilterChoose" v-if="css.filter">筛选</p>
      </div>
      <div class="total">
        {{type === 2 ?"本月预估收入":type === 3 ?"上月累计收入":"累计收入"}}：<span >¥ {{income}}<em v-if="css.filter&&type === 1" @click="switchPopup"></em></span>
      </div>
    </div>
    <v-list :load-handle='dataLoad' :more-handle='loadmore' :more-handling='css.isLoading' :isend='css.isEnd' v-if="orderData.length !== 0">
      <distribution-orders-unit v-for="item in orderData" :key='item.id' :orderInfo="item" :isorder='type === 4'></distribution-orders-unit>
    </v-list>
    <distribution-empty :showType="status===''?1:5" :distributionId="distributionId" v-if="orderData.length === 0"></distribution-empty>
    <div class="date-choose" v-show="showDateChoose" @click="switchDateChoose">
      <div class="picker-wrapper" @click.stop>
        <mt-picker :slots="dateData" @change="onValuesChange" class="date-picker"></mt-picker>
        <div class="btnbox">
          <a href="JavaScript:;" @click="switchDateChoose" class="cancel">取消</a>
          <a href="JavaScript:;" @click="dateFilter" class="ok">确定</a>
        </div>
      </div>
    </div>
    <div class="filter-choose" v-show="showFilterChoose" @click="switchFilterChoose">
      <div class="filter-wrap" @click.stop>
        <span :class="{active: status===''}" @click="statusFilter('')">全部</span>
        <span :class="{active: status===0}" @click="statusFilter(0)">{{type === 1?"待生效":"已付款"}}</span>
        <span :class="{active: status===1}" @click="statusFilter(1)">{{type === 1?"待结算":"已收货"}}</span>
        <span :class="{active: status===3}" @click="statusFilter(3)">已结算</span>
        <span :class="{active: status===2}" @click="statusFilter(2)">售后退款</span>
        <span :class="{active: status===4}" @click="statusFilter(4)" v-if='type !== 4'>拉新奖励</span>
      </div>
    </div>
    <mt-popup v-model="css.popup">
      <div class="popup">
        <div class="close" @click="switchPopup"></div>
        <div class="notW">
          <div class="title">累计收入说明</div>
          <p class="text">累计收入=待生效金额+待结算金额+已结算金额+售后退款+推荐好友成为分销商奖励</p>
          <p class="tips">售后退款:订单状态为已结算的订单予以返佣结算，若订单发生退货退款，则返佣扣回。</p>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import distributionOrdersUnit from './DistributionOrdersUnit'
import DistributionEmpty from './DistributionEmpty'
import { getHistroyIncome, getMonthIncome, shareToBeDistributionUrl } from '../../common/api/distribution'
export default {
  components: {
    'distribution-orders-unit': distributionOrdersUnit,
    DistributionEmpty
  },
  data() {
    return {
      css: {
        popup: false,
        filter: true,
        isLoading: false,
        isEnd: false,
        hasData: true
      },
      orderData: [],
      dateData: [
        {
          flex: 1,
          values: ['2018年']
        },
        {
          flex: 1,
          values: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          defaultIndex: new Date().getMonth()
        }
      ],
      showDateChoose: false,
      showFilterChoose: false,
      dateText: '',
      dateYear: '',
      dateMonth: '',
      distributionId: window.localStorage.getItem('distributionId'),
      income: '',
      status: '',
      title: ['累计收入明细', '本月预估收入', '上月累计收入', '全部订单'],
      type: 1,
      pagination: {
        sumcount: 0,
        pagesize: 10,
        pageindex: 1,
        hasLoad: true
      },
    }
  },
  created() {
    this.distributionId = this.getCurrentUser().distributionId

    this.type = Number(this.$route.params.type)
    if (this.$root.ISAPP) {
      window.document.title = this.title[this.type-1]
    }

    if (this.$route.params.type === '1' || this.$route.params.type === '4') {
      this.dateYear = new Date().getFullYear()
      this.dateMonth = new Date().getMonth() + 1
      this.getIncome('all')
      this.getOrder()
    } else if (this.$route.params.type === '2' || this.$route.params.type === '3') {
      this.dateYear = new Date().getFullYear()
      this.dateMonth = new Date().getMonth() + 1
      if (this.$route.params.type === '3') {
        if (new Date().getMonth() === 0) {
          this.dateYear = new Date().getFullYear() - 1
          this.dateMonth = 12
        } else {
          this.dateYear = new Date().getFullYear()
          this.dateMonth = new Date().getMonth()
        }
      }
      let year = []
      for (let i = 2018; i <= new Date().getFullYear(); i++) {
        year.push(i+'年')
      }
      this.$set(this.dateData, 0, {
        flex: 1,
        values: year,
        defaultIndex: year.length-1
      })
      this.getIncome()
      this.getOrder()
      this.css.filter = false
    }

    shareToBeDistributionUrl({
      parentid: this.distributionId
    }).then(res=>{
      if (this.$root.ISAPP) {
        let opt = {
          name: 'getAppActivityShareContent',
          params: {
            sharetitle: res.shareinfo.title,
            sharecontent: res.shareinfo.content,
            sharepicurl: res.shareinfo.icon,
            shareurl: res.shareinfo.url,
            xcxurl: res.shareinfo.scene,
          }
        }
        this.javascriptBridge(opt)
      }else{
        this.initShare({
          info:{
            title:res.shareinfo.title,
            desc:res.shareinfo.content,
            img:res.shareinfo.icon,
            url:res.shareinfo.url
          }
        })
      }
    })
  },
  methods: {
    onValuesChange(picker, values) {
      this.dateText = values.join('')
    },
    switchDateChoose() {
      console.log(this.css.filter)
      if (!this.css.filter) {
        return
      }
      this.showDateChoose = !this.showDateChoose
    },
    switchFilterChoose() {
      this.showFilterChoose = !this.showFilterChoose
    },
    switchPopup() {
      this.css.popup = !this.css.popup
    },
    dateFilter() {
      this.showDateChoose = !this.showDateChoose
      this.dateYear = this.dateText.substring(0, 4)
      if (this.dateText.length === 7) {
        this.dateMonth = this.dateText.substring(5, 6)
      } else {
        this.dateMonth = this.dateText.substring(5, 7)
      }
      this.dataLoad()
      this.getOrder()
    },
    statusFilter(type) {
      this.showFilterChoose = !this.showFilterChoose
      this.status = type
      this.dataLoad()
      this.getOrder()
    },
    getIncome(type) {
      let mouth = this.formatMonth(this.dateMonth)
      let params = {
        distributionid: this.distributionId,
        date: `${this.dateYear}-${mouth}-01 00:00:00`
      }
      if (type === 'all') {
        delete params.date
      }
      getHistroyIncome(params).then(res => {
        if (res) {
          this.income = res.toal
        }
      })
    },
    getOrder() {
      let mouth = this.formatMonth(this.dateMonth)
      let params = {
        distributionid: this.distributionId,
        date: `${this.dateYear}-${mouth}-01 00:00:00`,
        page: this.pagination.pageindex,
        size: 10,
        status: this.status
      }
      if(this.type !== 4){
        delete params.status
        params.brokeragestatus = this.status
      }
      getMonthIncome(params).then(res => {
        if (res.list.length > 0) {
          if(this.pagination.pageindex === 1){
            this.orderData = res.list
          }else{
            this.orderData = this.orderData.concat(res.list)
          }
        }else{
          this.css.hasData = false
          this.css.isLoading = false
          this.css.isEnd = true
        }
      })
    },
    formatMonth(month) {
      if (month < 10) {
        return `0${month}`
      } else {
        return month
      }
    },

    loadmore(){
      if (this.css.isEnd === true) {
        this.toast('已无更多')
      } else {
        this.pagination.pageindex += 1
        if (this.pagination.pageindex > 1) {
          this.pagination.hasLoad = false
        }
        this.getOrder()
      }
    },
    dataLoad(){
      this.orderData = []
      this.pagination.pageindex = 1
      this.css.isEnd = false
      this.getOrder()
    },
  }
}
</script>


<style lang='scss' scoped>
.main {
  color: rgb(51, 51, 51);
}
.title {
  background: url(/static/img/d_incomebg.png);
  background-size: 100% 100%;
  width: 100%;
  padding: 2.57vw 3.78vw;
}
.filter {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
  span{
    font-size: 24px;
    font-weight: 600;
  }
  .filter-time::after{
    content: '';
    float: right;
    width: 18px;
    height: 18px;
    background: url(/static/img/d_income_arr.png);
    background-size: 18px 18px;
    margin-top: 8px;
  }
  .nofilter.filter-time::after{
    display: none;
  }
  .filter-status::after{
    content: '';
    float: right;
    width: 12px;
    height: 13px;
    background: url(/static/img/d_income_filter.png);
    background-size: 12px 13px;
    margin-top: 4px;
    margin-left: 6px;
  }
}
.total {
  font-size: 12px;
  margin-top: 2vw;
  span{
    font-size: 18px;
    font-weight: 600;
  }
  em{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/static/img/d_income_help.png);
    background-size: 14px 14px;
    margin-left: 5px;
  }
}
.picker {
  font-size: 20px;
  font-weight: 600;
}
.date-choose, .filter-choose {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.33);
}
.picker-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  .btnbox{
    display: flex;
    width: 100%;
    height: 12vw;
    justify-content: center;
    a{
      flex-grow: 1;
      text-align: center;
      line-height: 12vw;
      &.cancel{
        background: #ccc;
      }
      &.ok{
        background: #333;
        color: #fff;
      }
    }
  }
}
.filter-choose{
  .filter-wrap{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10.67vw 0 13vw 4vw;
    display: flex;
    line-height: 8.8vw;
    flex-wrap: wrap;
    span{
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      width: 28vw;
      margin-right: 3vw;
      text-align: center;
      margin-bottom: 3vw;
      &.active{
        background: #333;
        color: #fff;
      }
    }
  }
}
.mint-popup{
  background: none;
}
.popup{
  width: 88vw;
  height: 62vw;
  border-radius: 8px;
  background: #fff;
  position: relative;
  display: flex;
  .notW{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 5.33vw;
    .title{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      padding-top: 10vw;
      background: none;
    }
    .text{
      font-size: 3.73vw;
      line-height: 2;
    }
    .tips{
      font-size: 3.2vw;
      color: #999;
      padding: 6vw 0;
      border-top: 1px dashed #ccc;
    }
  }
  .close{
    width: 5vw;
    height: 5vw;
    position: absolute;
    right: 3vw;
    top: 3vw;
    z-index: 10;
    &::before{
      content: '';
      width: 100%;
      height: 1px;
      background: #333;
      position: absolute;
      transform-origin: 50% 0;
      transform: rotate(45deg);
      position: absolute;
      top: 3vw;
    }
    &::after{
      content: '';
      width: 100%;
      height: 1px;
      background: #333;
      position: absolute;
      transform-origin: 50% 0;
      transform: rotate(-45deg);
      position: absolute;
      top: 3vw;
    }
  }
}
@media only screen and (device-width:375px) and (device-height:812px){
  .picker-wrapper{
    padding-bottom: 34px;
  }
}
</style>
